<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      *{
        margin: 0;
        padding: 0;
      }
        html,body{
            height: 100%;
               background-color: rgba(0, 0, 0, .5);
        }
         #app{
            height: 100%;
            position: fixed;
            background-color:white;
           margin-top: 100px;

        }
         /* 商品列表图片样式 */
         .block {
        width: 20%;
         /* text-align: center; */
         font-size:5px;
         margin-bottom: 40px;
         display: flex;
         /* position: fixed; */
         /* bottom: 0; */
          }
        
         .block img {
          width: 100%;
          margin-bottom: 10px;
          margin: 20px;
          }
          .dianpu .title{
            font-size: 20px;
            font-weight: bold;
            width: 220px;
            margin-top: 18px;
          }
          .dianpu .num{
            margin-left:10px ;
          }
          .dianpu1 {
            display: flex;
            margin-top: 35px;
           

          }
          .dianpu1 div{
            padding-right: 5px;
            width:20px;
          }
     .dianpu1 .cond{
        text-decoration: line-through;
       
     }

     .dianpu1 .jian{
        width: 10px;
        /* height: 10px; */
        margin-left: 90px;
        border: 1px solid blue;
        border-radius: 50%;
        text-align: center;
        line-height: 10px;
        padding-left: 5px;
     }
       .dianpu1 .jia{
        margin-left: 20px;
          width: 10px;
        /* height: 10px; */
     
        border: 1px solid blue;
        border-radius: 50%;
        text-align: center;
        line-height: 10px;
        padding-left: 5px;
     }
    .dianpu1 span{
        display: inline-block;
        margin-left: 20px;
    }

   #app .title{
            display: flex;
            justify-content: space-between;
            font-weight: bold;
        }

       .summary{
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #555;
            color: white;
            left: 0;
            position: fixed;
            bottom: 0;
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
        }
        .summary span:nth-child(2){
            background-color: lightgreen;
            color: white;
            padding: 5px 15px;
            border-radius: 5px;
        }
          .empty{
            text-align: center;
              height: 30px;  
              padding: 105px;          
        }
    </style>
</head>
<body>
    <div id="app">
      <div class="title">
        <span>已选商品</span>
        <span @click="clean">清空</span>
      </div>
        <!-- 商品列表图片 -->
        <div class="block" v-for="(item,index) in arr2">
            <img :src="item.pic" alt="">
            <div class="name"> {{ item.name }} </div>
            <!-- 店铺信息 -->
            <div class="dianpu">
                <div class="title">{{item.title}}</div>
            
                <div class="dianpu1">
                    <div class="price">￥{{item.price}}</div>
                    <div class="cond">￥{{item.cond}}</div>
                    <div class="jian" @click="jian(item)">-</div>
                    <span>{{item.num}}</span>
                    <div class="jia"  @click="jia(item)">+</div>
                </div>

            </div>     
    </div>
    <div class="empty" v-show="arr2.length == 0">购物车空空如也,去逛逛!</div>
      <div class="summary">
        <span>总数:{{totalCount}} 总价:{{totalPrice}} </span>
        <span>去结算</span>
      </div>
</div>
</body>
</html>
<script src="vue-2.5.21.js"></script>
<script src="1.购物车.js"></script>